import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  Upload,
  Tooltip,
} from 'antd';
import styles from './FamilyMemberSelector.less';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const costomerRelationArray = ["本人", "父/母", "配偶", "子/女", "兄弟/姐妹", "其他"];
const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

@connect(({ apply, customer }) => ({
  apply,
  customer,
}))
@Form.create()
export default class FamilyMemberSelector extends PureComponent {
  state = {
    mobileFlag: false,
    familyMemberDetails: null,
  };

  loadDataFromServer = () => {
    const { dispatch, data } = this.props;
    if (data == null) {
      return;
    }
    dispatch({
      type: 'customer/fetchCustomerRelation',
      payload: {
        customerId: data.id,
      },
    });
  }

  columns = [
    // {
    //   title: '客户编号',
    //   dataIndex: 'dealersNum',
    //   key: 'dealersNum',
    // },
    {
      title: '客户姓名',
      dataIndex: 'custName',
      key: 'custName',
    },
    {
      title: '身份证号',
      dataIndex: 'idcard',
      key: 'idcard',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '客户关系',
      dataIndex: 'relation',
      key: 'relation',
      render(val) {
        return costomerRelationArray[val];
      },
    },
  ];

  handleStandardTableChange = e => {
    this.props.dispatch({
      type: 'customer/fetchCustomerRelation',
      payload: { offset: (e.current - 1) * e.pageSize, limit: e.pageSize },
    });
  };

  // handleModal = () => {
  //   this.setState({
  //     mobileFlag: true,
  //   });
  // };

  // handleCancel = () => {
  //   this.setState({
  //     mobileFlag: false,
  //   });
  // };

  // handleOnOK = () => {
  //   this.setState({
  //     mobileFlag: false,
  //   });
  // };

  handleCustomerSelect = record => {
    // console.log('recohandleCustomerSelectrd', record);
    this.setState({
      familyMemberDetails: record,
    });
  };

  render() {
    const { customers } = this.props.apply;
    const { customer: { customerRelationList, customerPage, customerLoading } } = this.props;

    const rowSelection = {
      type: 'radio',
      onSelect: this.handleCustomerSelect,
    };

    return (
      
      <Modal width={700} title="选择关系人" {...this.props}>
      {/* {JSON.stringify(customerPage)}
      {console.log("customerRelationList", customerRelationList)} */}
        {/* <Button type='primary' onClick={this.handleModal}>新增</Button> */}
        <Table
          style={{ marginTop: '10px' }}
          size="middle"
          columns={this.columns}
          pagination={false}
          loading={customerLoading}
          rowSelection={rowSelection}
          dataSource={customerRelationList}
          onChange={this.handleStandardTableChange}
        />
        {/* <Modal
          title="选择"
          visible={this.state.mobileFlag}
          onCancel={this.handleCancel}
          onOk={this.handleOnOK}
        /> */}
      </Modal>
    );
  }
}
